<template>
  <div>
    <!-- 视频播放模块 -->
    <el-row :gutter="20">
      <el-col :span="16">
        <div>
          <video-player
          ref="videoPlayerRef"
          :videoUrl="video.videoSrc"
          :videoCover="video.videoImg"
          :totalTime="totalTime"
          :width="850"
          :height="450"
          :autoplay="false"
          :controls="true"
          :loop="false"
          :muted="false"
          preload="auto"
          :playWidth="96"
          zoom="none"
          >
          </video-player>
        </div>
      </el-col>
      <el-col :span="8">
        <div>
          <el-descriptions class="margin-top" title="任务描述" :column="1">
            <el-descriptions-item label="学习类型">
              必须掌握
            </el-descriptions-item>
            <el-descriptions-item label="技能要求">
              文明上网宣传片
            </el-descriptions-item>
            <el-descriptions-item label="视频类型">
              <el-tag size="small">网络</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="上传人">
              张三
            </el-descriptions-item>
          </el-descriptions>
          <div>
            <el-row>
              <el-col :span="5"><div class="el-descriptions__title">学习进度:</div></el-col>
              <el-col :span="19">
                <div>
                  <el-progress :percentage="processNum"></el-progress>
                </div>
              </el-col>
            </el-row>
          </div>
          
          <div>
            <el-row>
              <el-col :span="3"><div class="el-descriptions__title">评价：</div></el-col>
              <el-col :span="21">
                <div style="display: flex;align-items: center;">
                  <el-rate
                  @change="videoAppraiseHandle"
                  :disabled="appraised"
                  v-model="appraiseScore"
                  :colors="colors">
                  </el-rate>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 视频详情模块 -->
    <h3>{{ video.videoName }}</h3>
    <p>{{ video.videoDesc }}</p>
    <div>

    </div>
    <!-- https://mianyangzhangsan.oss-cn-hangzhou.aliyuncs.com/2050044894.mp4 -->
  </div>
</template>

<script>
import videoPlayer from '@/components/VideoPlayer.vue'
import { updateVideoLog, queryCurrentVideoLog, videoHitAdd, videoAppraise } from '@/api/system/system.js'
export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      video: {},
      readTime: 0,
      videoLog: {},
      totalTime: 0,
      timerId: '',
      processNum: 0,
      appraiseScore: 0,
      appraised: false,
      appraiseParam: {
        videoId: '',
        score: 0
      },
      colors: ['#99A9BF', '#F7BA2A', '#FF9900']
    }
  },
  async mounted() {
    this.video = JSON.parse(this.$store.state.currentVideo)
    // 查询当前视频的阅读记录
    const {data: res} = await queryCurrentVideoLog(this.video.fileId)
    if (res.code === 200 &&  res.data.videoLog) {
      this.videoLog =  res.data.videoLog
      this.readTime = this.videoLog.readTime
      this.totalTime = this.videoLog.fileTime
      this.appraised = this.videoLog.appraised
      this.appraiseScore = this.videoLog.score
    }
    // 开启定时器，记录当时视频的阅读时长
    this.timerId = setInterval(() => {
      this.readTime = this.$refs.videoPlayerRef.readTime
      if (this.readTime >= this.totalTime) {
        clearInterval(this.timerId)
      }
      this.processNum = Math.ceil((this.readTime / this.totalTime) * 100)
    }, 1000)
    // 进入视频详情页，增加当前视频的点击量
    videoHitAdd(this.video.videoId)
  },
  destroyed() {
    // 退出视频观看页面时记录
    this.videoLog.fileName = this.video.videoName
    this.videoLog.fileId = this.video.fileId
    this.videoLog.fileTime = this.video.videoTime
    this.videoLog.readTime = this.readTime
    updateVideoLog(this.videoLog)
    clearInterval(this.timerId)
  },
  methods: {
    async videoAppraiseHandle() {
      this.appraiseParam.videoId = this.video.videoId
      this.appraiseParam.score = this.appraiseScore
      const {data: res} = await videoAppraise(this.appraiseParam)
      if (res.code === 200) {
        this.$message.success('评价成功')
        // 更新视频观看记录
        this.videoLog.appraised = true
        updateVideoLog(this.videoLog)
      }

    }
  }
  

}
</script>

<style lang="css" scoped>
.sec_title_padding {
  padding: 0px;
}
</style>